<template>
  <div>
    <el-card class="card">
      <el-descriptions title="成绩查询" direction="vertical" :column="4" size="large" :span="2" border></el-descriptions>
      <el-select v-model="course" clearable placeholder="课程名" style="margin-left: 5%" @change="handleChangeCourse">
        <el-option v-for="item in coursesList" :key="item.id" :label="item.courseName" :value="item.id"/>
      </el-select>

      <el-input v-model="input" @clear="searchStudent" autocomplete="off" style="width: 15%;margin-left: 10%" placeholder="请输入学生姓名"/>
      <el-button type="primary" style="margin-left: 5px;width: 60px;" @click="searchStudent"><el-icon style="font-size: 20px;"><Search /></el-icon>搜索</el-button>
      <el-table class="courses-table" :data="stusCourseList" border>
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="grade" label="年级" />
        <el-table-column prop="score" label="成绩" >
          <template #default="{ row }">
            <span v-if="row.score !== -1">{{ row.score }}</span>
            <span v-else style="color: #888">无</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import { useRouter } from 'vue-router'
import {ChooseCourseItem, CourseItem, StudentItem, StusCourseItem, StusCourseList} from "@/api/teacher/type";
import {findStuNameList, getAllCourses, searchStuInfo, stusScoreByTeacher,} from "@/api/teacher";
import {GET_TEACHER} from "@/utils/teacherInfo";
import { getStudentInfo } from "@/api/user";
import { StudentCardInfo } from "@/api/user/type";
const router = useRouter()

const course = ref()
const coursesList = ref<CourseItem[]>()
const stusCourseList = ref<StusCourseList[]>()
// const stusScore = ref<StusCourseList>()
const input = ref()
const reqStuCourse = reactive<StusCourseItem>({
  courseName: '',
  id: 1,
  teacherId: 1
})

onMounted(async()=>{
  await getAllTeacherCourses()
})

const handleChangeCourse = async (newCourseValue: number) => {
  course.value = newCourseValue
  reqStuCourse.id = course.value
  await checkStusList()
}
//查看所授课程
const getAllTeacherCourses = async () => {
  try {
    const { data } =await getAllCourses(GET_TEACHER().id)
    coursesList.value = data
  } catch (error) {
    await Promise.reject(error)
  }
}

//切换授课学生成绩名单、
const checkStusList = async () => {
  try {
    const { data } = await stusScoreByTeacher(reqStuCourse)
    stusCourseList.value = data
  } catch (error) {
    await Promise.reject(error)
  }
}

//搜索学生
const searchStudent = async () => {
  try {
    const { data } = await searchStuInfo(reqStuCourse.id,input.value)
    console.log('111111111111111',data)
    stusCourseList.value = data
    input.value = ''
  } catch (error) {
    await Promise.reject(error)
  }
}


</script>

<style scoped>
.card {
  margin: 1% auto 0;
  width: 90%;
  opacity: 0.9;
}
.courses-table {
  width: 90%;
  margin-top: 20px;
  margin-left: 5%;
}

</style>
